<template>
  <div class="compare_new">
    <div class="btns" style="padding:1em;margin-bottom:1em;background:#fff">
      <el-input v-model="searchForm.proName" placeholder="项目"/>
       <el-select v-model="searchForm.status" clearable>
        <el-option value="0" label="未完成"/>
        <el-option value="1" label="已完成"/>
        <el-option value="2" label="所有"/>
      </el-select>
      <el-button style="margin-right: 6px" type="primary" icon="el-icon-search" size="small" @click="toSearch">查询</el-button>
    </div>
    <div style="margin: 10px">
      <el-card shadow="never">
        <div slot="header" class="index-md-title">
          <span>项目表</span>
        </div>
        <a-table
          v-loading="loading"
          :rowKey="record => record.id" 
          :data-source="projects"
          size="middle"
          :pagination="pagination"
        >
          <a-table-column :width="80" title="比价数量" data-index="noCompareNum">
            <template slot-scope="t">
              <el-tag type="success">{{t}}</el-tag>
            </template>
          </a-table-column>
          <a-table-column :sorter="(a, b) => a.proName.localeCompare(b.proName)" @filter="onFilter" @filterDropdownVisibleChange="onFilterDropdownVisibleChange" :scopedSlots="scopedSlots" ellipsis="true" key="proName" title="项目名称" data-index="proName">
            <template slot="filterDropdown" slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
                      style="padding: 8px">
              <a-input
                v-ant-ref="c => (searchInput = c)"
                :placeholder="`查找项目名`"
                :value="selectedKeys[0]"
                style="width: 188px; margin-bottom: 8px; display: block;"
                @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
                @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
              />
              <el-button
                type="primary"
                icon="el-icon-search"
                size="small"
                style="width: 90px; margin-right: 8px"
                @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
              >
                查找
              </el-button>
              <el-button size="small" style="width: 90px" @click="() => handleReset(clearFilters)">
                重置
              </el-button>
            </template>
          </a-table-column>
          <a-table-column ellipsis="true" key="content" title="内容" data-index="content" />
          <a-table-column ellipsis="true" key="remark" title="备注" data-index="remark" />
          <a-table-column ellipsis="true" key="createBy" title="创建人" data-index="createBy" />
          <a-table-column ellipsis="true" key="createTime" title="创建时间" data-index="createTime">
            <template slot-scope="text">{{dateFormat(text)}}</template>
          </a-table-column>
          <a-table-column title="操作" align="center" width="180">
            <template slot-scope="text, record">
              <el-button type="primary" size="mini" @click="toCompare(record.id)">比价</el-button>
            </template>
          </a-table-column>
        </a-table>
      </el-card>
    </div>
  </div>
</template>
<script>
  import '@/styles/auto-style.css'
  import { onFilterDropdownVisibleChange, onFilter, handleReset, handleSearch} from '@/utils/column-search'
  import { dateFormat } from '@/utils/format'
  import { getAction } from '@/api/manage'

  const scopedSlots = {
    filterDropdown: 'filterDropdown',
    filterIcon: 'filterIcon',
    customRender: 'customRender',
  }

  export default {
    //name: '比价管理',
    data() {
      return {
        searchForm: {},
        scopedSlots,
        searchText: '',
        searchedColumn: '',
        searchInput: null,
        loading: false,
        projects: [],
        pagination: {
          showTotal: total => `共 ${total} 条结果`,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ['1', '2', '5', '10'],
          pageNum: 1,
          pageSize: 10,
          total: 0,
          onChange: (pageNum) =>  {
            this.pagination.pageNum = pageNum
            this.toSearch()
          },
          onShowSizeChange: (pageNum, pageSize) => {
            this.pagination.pageSize = pageSize
            this.toSearch()
          } // 改变每页数量时更新显示
        },
        url: {
          findByAllPage: '/project/detail/findByAllPage'
        }
      }
    },
    created() {
      this.toSearch()
    },
    methods: {
      dateFormat,
      onFilterDropdownVisibleChange,
      onFilter,
      handleReset,
      handleSearch,
      toSearch() {
        this.loading = true
        this.searchForm.pageNum = this.pagination.pageNum
        this.searchForm.pageSize = this.pagination.pageSize
        getAction(this.url.findByAllPage, this.searchForm)
        .then(resp =>{
          if(resp.data){
            this.projects = resp.data.records
            this.pagination.pageSize = parseInt(resp.data.size)
            this.pagination.total = parseInt(resp.data.total)
          }
        }).catch((e)=>{
          this.$message.error(e)
        }).finally(()=>{
          this.loading = false
        })
      },
      toCompare(proDetailId) {
        this.$router.push({ path: "/compare/compare", query: { proId: proDetailId}})
      }
    }
  }
</script>
<style lang="scss" scoped>

</style>
